<template>
	<view>
		<view class="no-warpper" v-if="hasNet">
			<view class="nl-shadow-box">
				<view class="nl-flex-list m10" @click="pickerSelect">
					<text>问题类型</text>
					<view class="right-grey m1">
						<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
						{{selectValue}}
					</view>
					<u-icon name="arrow-right" class="right-icon"></u-icon>
				</view>
				<view class="nl-flex-title">
					<text>问题描述</text>
				</view>
				<view class="textarea-padding">
					 <!-- placeholder="请输入问题描述" -->
					<u-input v-model="value" type="textarea" border
						placeholder-style="color: #AFAFAF;font-size: 28rpx;" />
				</view>
				<view class="button-sm btn-padding" @click="submit">
					<button>提交</button>
				</view>
			</view>
		</view>
		<view v-else>
			<netError @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {
		getListIssueType,
		saveIssueDetails
	} from '@/api/feedback.js'

	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				value: '', //输入框绑定内容
				selectValue: '请选择', //选择器内容
				show: false, //选择器状态
				list: [], //问题类型列表
				hasNet: true, //是否有网络
			}
		},
		onLoad() {
			this.getListIssueType()
			// console.log('userid--'+this.userId)
			// console.log(this.userCommunity.communityId)
		},
		computed: {
			...mapState('user', ['userId', 'userCommunity'])
		},
		methods: {
			/*
			 **	选择器状态
			 */
			pickerSelect() {
				this.show = true
			},
			/*
				选择器点击确认
			*/
			confirm(e) {
				this.selectValue = e[0].label
			},
			/*
				请求分类数据
			*/
			async getListIssueType() {
				let data = {
					page: '1',
					row: '999'
				}
				try {
					const res = await getListIssueType(data)
					let curList = []
					res.types.forEach((item, index) => {
						let obj = {}
						obj.label = item.itDescribe
						obj.value = item.itId
						curList.push(obj)
					})
					this.list = curList
					this.hasNet = true
				} catch (e) {
					this.hasNet = false
				}

			},
			/*
				提交问题
			*/
			async submit() {
				let data = {
					communityId: this.userCommunity.communityId,
					userId: this.userId,
					isDetails: this.value,
					itDescribe: this.selectValue
				}
				try {
					const res = await saveIssueDetails(data)
					console.log(res)
					uni.showToast({
						title: '提交成功',
						duration: 2000,
						icon: 'success'
					})

					uni.navigateBack({
						delta: 1
					})

				} catch (e) {
					uni.showToast({
						title: '提交失败,请重试',
						duration: 2000,
						icon: 'error'
					})
				}

			},
			/*
				无网重新刷新
			*/
			refresh() {
				uni.showLoading({
					title: '加载中'
				})
				this.getListIssueType()
			}
		}
	}
</script>

<style lang="scss">
	.m1 {
		margin-right: 10rpx;
	}

	.textarea-padding {
		padding: 0 24rpx 24rpx;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}

	.m10 {
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}

	.btn-padding {
		padding: 24rpx 116rpx;
	}
</style>
